<template>
  <div style="display: flex; flex-direction: column; gap: 20px">
    <div style="display: flex; justify-content: center">
      <t-button theme="primary" @click="submit">提交</t-button>
    </div>
    <t-table
      rowKey="index"
      :data="data"
      :columns="columns"
      bordered
      hover
      :selected-row-keys="selectedRowKeys"
      @select-change="rehandleSelectChange"
      :loading="dataLoading"
    >
      <template #index="{ rowIndex }">
        {{ rowIndex + 1 }}
      </template>
      <template #op="{ row }">
        <div style="margin-bottom: 10px; display: flex; justify-content: center">
          <t-icon style="color: red" size="20" name="error-circle-filled"></t-icon
          >每个擅长学科最多有五个关键词：请根据所填学科名称输入中文关键词。注意每个空格只填写一个关键词。
        </div>
        <div style="display: flex;margin-bottom: 6px;">
          <div style="flex: 1.1; display: flex; justify-content: end; align-items: center">学科名称：</div>
          <div style="flex: 8">
            <!-- <t-tree-select
              v-model="row.subjectId"
              style="width: 200px"
              clearable
              :treeProps="{ keys: { value: 'id' } }"
              placeholder="请选择学科"
            ></t-tree-select> -->
            <t-tree-select clearable filterable :treeProps="{keys: {value: 'id'}, scroll:{type: 'virtual'}}" v-model="row.subjectId" :data="majorOptions" placeholder="请选择专业" />
          </div>
        </div>
        <div style="display: flex">
          <div style="flex: 1.1; display: flex; justify-content: end; align-items: center">中文关键词：</div>
          <div style="flex: 8; display: flex; gap: 10px">
            <t-input v-model="row.keyWords[0]" style="flex: 1; width: 0px"></t-input>
            <t-input v-model="row.keyWords[1]" style="flex: 1; width: 0px"></t-input>
            <t-input v-model="row.keyWords[2]" style="flex: 1; width: 0px"></t-input>
            <t-input v-model="row.keyWords[3]" style="flex: 1; width: 0px"></t-input>
            <t-input v-model="row.keyWords[4]" style="flex: 1; width: 0px"></t-input>
          </div>
        </div>
      </template>
    </t-table>
    <div class="btn-group-inline">
      <t-button @click="addData(1)">添加</t-button>
      <t-button @click="upData(1)">上移</t-button>
      <t-button @click="downData(1)">下移</t-button>
      <t-button @click="delData(1)">删除</t-button>
    </div>
    <t-table
      rowKey="index"
      :data="data2"
      :columns="columns2"
      bordered
      hover
      :selected-row-keys="selectedRowKeys2"
      :loading="dataLoading2"
      @select-change="rehandleSelectChange2"
    >
      <template #index="{ rowIndex }">
        {{ rowIndex + 1 }}
      </template>
      <template #op="{ row }">
        <div style="margin-bottom: 10px; display: flex; justify-content: center">
          <t-icon style="color: red" size="20" name="error-circle-filled"></t-icon
          >每个擅长学科最多有五个关键词：请根据所填学科名称输入中文关键词。注意每个空格只填写一个关键词。
        </div>
        <div style="display: flex;margin-bottom: 6px;">
          <div style="flex: 1.1; display: flex; justify-content: end; align-items: center">学科名称：</div>
          <div style="flex: 8">
            <!-- <t-tree-select
              v-model="row.subjectId"
              style="width: 200px"
              clearable
              :treeProps="{ keys: { value: 'id', label: 'name' } }"
              placeholder="请选择学科"
            ></t-tree-select> -->
            <t-tree-select clearable filterable :treeProps="{keys: {value: 'id'}, scroll:{type: 'virtual'}}" v-model="row.subjectId" :data="majorOptions" placeholder="请选择专业" />
          </div>
        </div>
        <div style="display: flex">
          <div style="flex: 1.1; display: flex; justify-content: end; align-items: center">中文关键词：</div>
          <div style="flex: 8; display: flex; gap: 10px">
            <t-input v-model="row.keyWords[0]" style="flex: 1; width: 0px"></t-input>
            <t-input v-model="row.keyWords[1]" style="flex: 1; width: 0px"></t-input>
            <t-input v-model="row.keyWords[2]" style="flex: 1; width: 0px"></t-input>
            <t-input v-model="row.keyWords[3]" style="flex: 1; width: 0px"></t-input>
            <t-input v-model="row.keyWords[4]" style="flex: 1; width: 0px"></t-input>
          </div>
        </div>
      </template>
    </t-table>
    <div class="btn-group-inline">
      <t-button @click="addData(2)">添加</t-button>
      <t-button @click="upData(2)">上移</t-button>
      <t-button @click="downData(2)">下移</t-button>
      <t-button @click="delData(2)">删除</t-button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'expert-subject',
  // dicts: ['expert_project_level','join_patter','expert_project_stauts'],
  props: ['objId'],
  data() {
    return {
      dataLoading: false,
      selectedRowKeys: [],
      data: [
        // {
        //   index: 1,
        //   subjectId: null,
        //   keyWords: [],
        // },
        // {
        //   index: 2,
        //   keyWords: [],
        // },
      ],
      columns: [
        {
          colKey: 'row-select',
          type: 'single',
          title: '选择',
          width: 64,
        },
        {
          colKey: 'index',
          title: '序号',
          align: 'center',
          width: 90,
        },
        {
          colKey: 'op',
          title: '擅长学科---国家科技部技术领域',
          align: 'center',
        },
      ],
      dataLoading2: false,
      selectedRowKeys2: [],
      data2: [
        // {
        //   index: 1,
        //   a2: 1,
        //   keyWords: [],
        // },
      ],
      columns2: [
        {
          colKey: 'row-select',
          type: 'single',
          title: '选择',
          width: 64,
        },
        {
          colKey: 'index',
          title: '序号',
          align: 'center',
          width: 90,
        },
        {
          colKey: 'op',
          title: '擅长学科---国家基金委技术领域',
          align: 'center',
        },
      ],
      majorOptions: []
    };
  },
  created() {
    // 获取学科树
    this.getMajor()
  },
  mounted() {
    this.getObj();
  },
  methods: {
    getMajor() {
      this.$api.system.major.treeselect().then(response => {
        this.majorOptions = [];
        this.majorOptions = response.data;
      }).catch((e) => {
        this.$message.error(e.toString());
      });
    },
    getObj() {
      this.$api.zjk.expert.expertSubjectsGetByExpertId(this.objId).then(res => {
        const resData = res.data
        const data = []
        const data2 = []
        resData.forEach(item => {
          if (item.subjectTerritory === '1') {
            data.push({
              index: data.length,
              subjectId: item.subjectId,
              keyWords: item.keyWords.split(',')
            })
          } else if (item.subjectTerritory === '2') {
            data2.push({
              index: data.length,
              subjectId: item.subjectId,
              keyWords: item.keyWords.split(',')
            })
          }
        })
        this.data = data
        this.data2 = data2
      }).catch(e => {
        this.$message.error(e.toString())
      })
    },
    submit() {
      const data = []
      const expertId = this.objId
      this.data.forEach(item => {
        data.push({
          expertId,
          subjectId: item.subjectId,
          keyWords: item.keyWords.join(','),
          subjectTerritory: '1'
        })
      })
      this.data2.forEach(item => {
        data.push({
          expertId,
          subjectId: item.subjectId,
          keyWords: item.keyWords.join(','),
          subjectTerritory: '2'
        })
      })
      this.$api.zjk.expert.expertSubjectsAdd(data).then(() => {
        this.$message.success('提交成功')
      }).catch(e => {
        this.$message.error(e.toString())
      })
    },
    rehandleSelectChange(value) {
      this.selectedRowKeys = value;
    },
    rehandleSelectChange2(value) {
      this.selectedRowKeys2 = value;
    },
    addData(type) {
      if (type === 1) {
        this.data.push({
          index: this.data.length + 1,
          keyWords: [],
        });
      } else {
        this.data2.push({
          index: this.data2.length + 1,
          keyWords: [],
        });
      }
    },
    upData(type) {
      if (type === 1) {
        if (this.selectedRowKeys.length <= 0) {
          this.$message.warning('请选择一行');
          return;
        }
        if (this.data[0].index === this.selectedRowKeys[0]) {
          this.$message.warning('已是第一行');
        } else {
          const index = this.data.findIndex((val) => val.index === this.selectedRowKeys[0]);
          this.moveInArray(this.data, index, index - 1);
        }
      } else {
        if (this.selectedRowKeys2.length <= 0) {
          this.$message.warning('请选择一行');
          return;
        }
        if (this.data2[0].index === this.selectedRowKeys2[0]) {
          this.$message.warning('已是第一行');
        }
        const index = this.data2.findIndex((val) => val.index === this.selectedRowKeys2[0]);
        this.moveInArray(this.data2, index, index - 1);
      }
    },
    downData(type) {
      if (type === 1) {
        if (this.selectedRowKeys.length <= 0) {
          this.$message.warning('请选择一行');
          return;
        }
        if (this.data[this.data.length - 1].index === this.selectedRowKeys[0]) {
          this.$message.warning('已是最后一行');
        } else {
          const index = this.data.findIndex((val) => val.index === this.selectedRowKeys[0]);
          this.moveInArray(this.data, index, index + 1);
        }
      } else {
        if (this.selectedRowKeys2.length <= 0) {
          this.$message.warning('请选择一行');
          return;
        }
        if (this.data2[this.data.length - 1] === this.selectedRowKeys2[0]) {
          this.$message.warning('已是最后一行');
        }
        const index = this.data2.findIndex((val) => val.index === this.selectedRowKeys2[0]);
        this.moveInArray(this.data2, index, index + 1);
      }
    },
    delData(type) {
      if (type === 1) {
        if (this.selectedRowKeys.length <= 0) {
          this.$message.warning('请选择一行');
          return;
        }
        const index = this.data.findIndex((val) => val.index === this.selectedRowKeys[0]);
        this.data.splice(index, 1);
      } else {
        if (this.selectedRowKeys2.length <= 0) {
          this.$message.warning('请选择一行');
          return;
        }
        const index = this.data2.findIndex((val) => val.index === this.selectedRowKeys2[0]);
        this.data2.splice(index, 1);
      }
    },
    moveInArray(arr, ffrom, to) {
      // 删除当前的位置
      const item = arr.splice(ffrom, 1);
      // 确保还剩有元素移动
      if (!item.length) {
        this.$message.warning(`There is no item in the array at index ${ffrom}`);
      }
      // 移动元素到指定位置
      arr.splice(to, 0, item[0]);
    },
  },
};
</script>

<style scoped></style>
